<template>
  <div>
    <template v-for="(item, index) in options" :key="item.value">
      <template v-if="values.includes(item.value)">
        <!--type不能传递空字符串, 否则会警告使用null代替-->
        <el-tag
          :type="item.tagType === 'default'|| item.tagType === '' ? null : item.tagType"
          :disable-transitions="true"
          :index="index"
          class="base-tag"
          :class="[item.tagType === 'default'? 'default-tag' : null, item.className]"
          :style="tagStyle"
        >
          {{ item.label }}
        </el-tag>
      </template>
    </template>
  </div>
</template>

<script setup>

// 定义组件属性
const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  value: {
    type: [Number, String, Array],
    default: null
  },
  tagStyle: {
    type: Object,
    default: () => ({})
  }
})

// 计算属性
const values = computed(() => {
  if (props.value !== null && typeof props.value !== 'undefined') {
    return Array.isArray(props.value) ? props.value : [String(props.value)]
  }
  return []
})
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.base-tag {
  height: 1.75rem;
  line-height: 1.625rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25rem;
  box-sizing: border-box;
  white-space: nowrap;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.default-tag {
  color: #303133;
  background-color: transparent;
  border-color: #303133;
}

.magenta-tag {
  color: #f572b9;
  background-color: #fff0f6;
  border-color: #fad9e8;
}

.orange-tag {
  color: #fa8c16;
  background: #fff2e8;
  border-color: #f8dbcb;
}

.gold-tag {
  color: #faad14;
  background: #fffbe6;
  border-color: #ffe58f;
}

.blue-tag {
  color: #1890ff;
  background: #e6f7ff;
  border-color: #c5e6fc;
}

.purple-tag {
  color: #8e50e5;
  background: #f9f0ff;
  border-color: #e5cbfd;
}
</style>
